<template>
  <div>
    <div class="container">
      <div class="main">
        <div class="main-top">
          <div class="logo-nav">
            <el-avatar :size="100">{{ editUserInfoForm.photo }}</el-avatar>
            <div class="name">{{ editUserInfoForm.realname }}</div>
            <el-menu
              style="width: 100%; border: none"
              background-color="#fff"
              text-color="#333"
              active-text-color="#F56C6C"
              @select="getData"
            >
              <el-menu-item index="1">
                <i class="el-icon-location"></i>
                <span slot="title"> 个人资料</span>
              </el-menu-item>
              <!-- <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">密码重置</span>
              </el-menu-item> -->
            </el-menu>
          </div>
          <div class="info">
            <div>
              <el-descriptions title="个人信息" :column="3">
                <el-descriptions-item label="用户名">
                  {{ editUserInfoForm.username }}</el-descriptions-item
                >
                <el-descriptions-item label="手机号码">{{
                  editUserInfoForm.phone
                }}</el-descriptions-item>
                <el-descriptions-item label="收货地址">{{
                  editUserInfoForm.address
                }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{
                  editUserInfoForm.age
                }}</el-descriptions-item>
                <!-- <el-descriptions-item label="备注">
                  <el-tag size="small">学校</el-tag>
                </el-descriptions-item> -->
                <el-descriptions-item label="邮箱">{{
                  editUserInfoForm.email
                }}</el-descriptions-item>
                <!-- <el-descriptions-item label="个性签名">{{userInfoForm.bio}}</el-descriptions-item> -->
              </el-descriptions>
              <!-- zheli bu shi shen me -->
              <div
                style="
                  position: absolute;
                  bottom: 0px;
                  right: 10px;
                  display: flex;
                "
              >
                <el-button
                  size="small"
                  type="primary"
                  style="width: 100%"
                  @click="changeUserInfo"
                  >修改信息</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  style="width: 100%"
                  @click="resetPasswordFunc"
                  >重置密码</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  style="width: 100%"
                  @click="goHome"
                  >返回首页</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  style="width: 100%"
                  @click="logout"
                  >退出登录</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="修改用户信息"
        :visible.sync="isChangeUserInfo"
        v-model="isChangeUserInfo"
      >
        <el-form
          :model="editUserInfoForm"
          :rules="rules"
          ref="userInfoForm"
          label-width="100px"
        >
          <el-form-item label="年龄" prop="age">
            <el-input
              v-model="editUserInfoForm.age"
              placeholder="请输入年龄"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="editUserInfoForm.phone"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input
              v-model="editUserInfoForm.realname"
              placeholder="真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input
              v-model="editUserInfoForm.email"
              placeholder="请输入邮箱地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货地址地址" prop="address">
            <el-input
              v-model="editUserInfoForm.address"
              placeholder="请输入详细地址 比如3层207"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isChangeUserInfo = false">取 消</el-button>
          <el-button type="primary" @click="confirmInfoChange">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        width="30%"
        title="重置密码"
        :visible.sync="resetPasswordFlag"
        v-model="resetPasswordFlag"
      >
        <!-- <el-input
          size="small"
          placeholder="请输入注册手机号"
          type="number"
        ></el-input> -->
        <el-input
          size="small"
          style="margin-top: 10px"
          v-model="resetPassword"
          placeholder="请输入重置密码"
          show-password
        ></el-input>
        <el-input
          size="small"
          style="margin-top: 10px"
          v-model="confirmResetPassword"
          placeholder="请再次输入重置密码"
          show-password
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="resetPasswordFlag = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="confirmChange"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex' // mapGetters从整个工程其他地方获取数据
import { ElMessage } from 'element-plus'

import { updatePassword } from '../api/index'
import { updateUserInfo } from '../api/index'
export default {
  data() {
    return {
      userInfoForm: {
        userId: '',
        userName: '', //用户名
        phone: '', //手机号码
        address: '', //地址
        realname: '',
        email: '',
        age: '',
        photo: '',
      },
      //编辑用户信息表单
      editUserInfoForm: {
        uid: this.$store.state.userId,
        username: this.$store.state.userName, //用户名
        phone: this.$store.state.phone, //手机号码
        address: this.$store.state.address, //地址
        realname: this.$store.state.realname,
        email: this.$store.state.email,
        age: this.$store.state.age,
        photo: this.$store.state.photo,
      },

      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        address: [
          {
            required: true,
            message: '请输入详细地址 比如3层207',
            trigger: 'blur',
          },
        ],
      },
      resetPassword: '',
      confirmResetPassword: '',
      resetPasswordFlag: false,
      isChangeUserInfo: false,
      tableData: [], //数据库表数据
    }
  },

  computed: {
    // 监控数据的获取
    ...mapGetters([
      'userId',
      'userName',
      'password',
      'realname',
      'phone',
      'address',
      'email',
      'sex',
      'idCard',
      'age',
      'type',
    ]),
  },
  //生命周期函数
  created() {},
  methods: {
    //初始化从vuex中拿到的数据

    //路由跳转回到首页
    goHome() {
      this.$router.push('/')
    },
    confirmInfoChange() {
      var user = this.editUserInfoForm
      console.log('user.uid:  ' + user.uid)
      console.log('user.realname:  ' + user.realname)
      updateUserInfo(user).then((res) => {
        ElMessage({
          message: res.msg,
          type: 'success',
        })
      })

      this.isChangeUserInfo = false
    },

    changeUserInfo() {
      console.log('changeUserInfo')
      this.isChangeUserInfo = true
    },

    // //弹出编辑页面
    // handleEdit(row) {
    //   this.editVisible = true
    //   this.form = {
    //     id: row.id,
    //     name: row.name,
    //     prices: row.prices,
    //     introduction: row.introduction,
    //   }
    // },
    //保存修改用户信息
    editSave() {
      updateDishAndMaster(this.form)
        .then((res) => {
          if (res) {
            this.notify('修改成功', 'success')
            this.getData()
          } else {
            this.notify('修改失败', 'error')
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.editVisible = false
    },

    logout() {
      localStorage.healthyToken = ''
      localStorage.healthyUserInfo = ''
      this.$router.push({ path: '/login' })
    },
    resetPasswordFunc() {
      this.resetPassword = ''
      this.resetPasswordFlag = true
    },
    confirmChange() {
      if (this.resetPassword == '') {
        this.$message.error('新密码不能为空')
        return
      }
      if (this.confirmResetPassword != this.resetPassword) {
        this.$message.error('两个密码不一致请重新输入')
        return
      }
      var user = {
        uid: this.$store.state.userId,
        password: this.resetPassword,
      }

      // console.log('user.uid  ' + user.uid)
      // console.log('user.password  ' + user.password)

      updatePassword(user).then((res) => {
        ElMessage({
          message: res.msg,
          type: 'success',
        })
        this.resetPasswordFlag = false
        this.$router.push('/login')
      })
    },
  },
}
</script>

<style scoped>
.container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f1f1;
  overflow: auto;
}
.main {
  width: 1200px;
  box-sizing: border-box;
  padding: 20px;
  margin: 10px auto 0;
  border-radius: 12px;
  background-color: #fff;
}
.main-top {
  display: flex;
}
.logo-nav {
  width: 200px;
  min-width: 200px;
  border-right: 2px solid #f1f1f1;
  text-align: center;
  padding: 10px;
  padding-right: 20px;
  box-sizing: border-box;
}
.logo-nav .name {
  font-size: 20;
  font-weight: bold;
  margin: 10px;
}
.main-top .info {
  padding: 10px 20px;
  position: relative;
  width: 100%;
}
.menu {
  display: flex;
  height: 200px;
  padding: 10px;
  text-align: left;
}
.menu .info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>
